import React from 'react'
import PropTypes from 'prop-types'
import {Cascader, Col, Form, Input, message, Modal, Row} from 'antd'
import Position from "utils/position"

const FormItem = Form.Item

const formItemLayout = {
  labelCol: {span: 7},
  wrapperCol: {span: 17},
}

const modal = ({
                 item = {},
                 onOk,
                 handleSearch,
                 dataSource,
                 form: {
                   getFieldDecorator,
                   validateFields,
                   getFieldsValue,
                 },
                 ...modalProps
               }) => {

  const valid = fields => {
    const {addr} = fields
    let flag = true, msg = "请选择完整的省份、城市、区县"
    if (!addr[0] || !addr[1] || !addr[2]) {
      flag = false
    }

    if (!flag) {
      message.warn(msg)
    }

    return flag
  }

  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const fields = getFieldsValue()
      if (!valid(fields)) {
        return
      }

      const {addr} = fields
      fields.provinceId = addr[0]
      fields.cityId = addr[1]
      fields.areaId = addr[2]
      delete fields.addr
      onOk(fields)
    })
  }

  const handleChange = (value, selectedOptions) => {
    getFieldDecorator('provinceName', {initialValue: selectedOptions[0].label})
    getFieldDecorator('cityName', {initialValue: selectedOptions[1].label})
    getFieldDecorator('areaName', {initialValue: selectedOptions[2].label})
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <Row gutter={24}>
          <Col span={12}>
            <FormItem {...formItemLayout} label="收货人">
              {getFieldDecorator('receiver', {
                initialValue: item.receiver,
                rules: [{required: true, message: '请输入收货人名称'}],
              })(<Input placeholder="收货人名称"/>)}
              {getFieldDecorator('customerId', {
                initialValue: item.customerId,
              })(<Input type={'hidden'}/>)}
              {getFieldDecorator('id', {
                initialValue: item.id,
              })(<Input type={'hidden'}/>)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label="收货电话">
              {getFieldDecorator('mobile', {
                initialValue: item.mobile,
                rules: [{required: true, message: '请输入收货联系电话'}],
              })(<Input placeholder="收货联系电话"/>)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <FormItem {...formItemLayout} label="收货地址">
              {getFieldDecorator('addr', {
                initialValue: [item.provinceId, item.cityId, item.areaId],
                rules: [{required: true, message: '请选择收货地址'}],
              })(<Cascader
                allowClear
                options={Position}
                placeholder="请选择城市"
                onChange={handleChange}
              />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem>
              {getFieldDecorator('address', {
                initialValue: item.address,
                rules: [{required: true, message: '请输入详细地址'}],
              })(<Input placeholder="详细地址"/>)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
